<template>
  <view class="container">
    <view class="header">
      <view class="logo"></view>
      <view class="title-row">
        <view class="title-app">社区医疗</view>
        <view class="title-register">欢迎注册！</view>
      </view>
    </view>
    <view class="form-section">
      <!-- 手机号 -->
      <view class="label">手机号</view>
      <input
        class="input"
        type="text"
        v-model="phone"
        placeholder="请输入登录手机号"
        @blur="onPhoneBlur"
      />
      <view v-if="phoneTouched && phoneError" class="error-tip"
        >手机号格式不正确!</view
      >
      <!-- 密码 -->
      <view class="label">密码</view>
      <view class="input-password-row">
        <input
          class="input"
          :type="showPassword ? 'text' : 'password'"
          v-model="pwdmd5"
          placeholder="设置密码"
        />
      </view>
      <!-- 确认密码 -->
      <view class="label">确认密码</view>
      <input
        class="input"
        :type="showConfirmPassword ? 'text' : 'password'"
        v-model="confirmPassword"
        placeholder="再次输入密码确认"
      />
      <!-- 出生日期和性别 -->
      <view class="row-flex">
        <view class="label">出生日期</view>
        <view class="label gender-label">性别</view>
      </view>
      <view class="row-flex">
        <view class="date-picker" @click="openDatePicker">
          {{ birthday || "请选择日期" }}
          <text class="calendar-icon">📅</text>
        </view>
        <!-- 日期选择器弹窗 -->
        <uni-datetime-picker
          v-if="showDatePicker"
          type="date"
          :value="birthday"
          @change="onDateChange"
          @close="showDatePicker = false"
        />

        <view class="gender-group">
          <view
            class="gender-btn"
            :class="{ active: gender === '0' }"
            @click="gender = '0'"
            >0</view
          >
          <view
            class="gender-btn"
            :class="{ active: gender === '1' }"
            @click="gender = '1'"
            >1</view
          >
        </view>
      </view>
      <!-- 居民身份证 -->
      <view class="label">居民身份证</view>
      <input
        class="input"
        type="text"
        v-model="uid"
        placeholder="请输入18位身份证号"
      />
      <!-- 姓名 -->
      <view class="label">姓名</view>
      <input
        class="input"
        type="text"
        v-model="name"
        placeholder="请输入姓名"
      />
      <!-- 注册按钮 -->
      <button class="register-btn" @click="onRegister">确认注册</button>
      <text class="register-link" @click="onRegisterClick"
        >已有账号？点击跳转登录</text
      >
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
// 引入注册接口 类型
import type { SignupParams, SignupResponse } from "@/types/home";
import { SignupApi } from "@/https/HomeHTTP";
import md5 from "js-md5";
// 手机号
const phone = ref("");
// 密码
const pwdmd5 = ref("");
// 出生日期
const birthday = ref("");
//性别
const gender = ref("0");
// 身份证
const uid = ref("");
// 姓名
const name = ref("");

// 确认密码
const confirmPassword = ref("");
const phoneTouched = ref(false);
const showPassword = ref(false);
const showConfirmPassword = ref(false);
const showDatePicker = ref(false);
const phoneError = ref(false);
function validatePhone() {
  // 简单手机号正则
  phoneError.value = !/^1[3-9]\d{9}$/.test(phone.value);
}
// 日期选择器
function onDateChange(e) {
  if (typeof e === "string") {
    birthday.value = e;
  } else if (e && e.detail && e.detail.value) {
    birthday.value = e.detail.value;
  }
  showDatePicker.value = false;
}

function openDatePicker() {
  showDatePicker.value = true;
}
function onPhoneBlur() {
  phoneTouched.value = true;
  validatePhone();
}
const onRegister = async () => {
  // 非空校验
  if (!phone.value) {
    uni.showToast({ title: "手机号不能为空", icon: "none" });
    return;
  }
  if (phoneError.value) {
    uni.showToast({ title: "请填写正确手机号", icon: "none" });
    return;
  }
  if (!pwdmd5.value) {
    uni.showToast({ title: "密码不能为空", icon: "none" });
    return;
  }
  if (!confirmPassword.value) {
    uni.showToast({ title: "请确认密码", icon: "none" });
    return;
  }
  if (pwdmd5.value !== confirmPassword.value) {
    uni.showToast({ title: "两次密码不一致", icon: "none" });
    return;
  }
  if (!birthday.value) {
    uni.showToast({ title: "请选择出生日期", icon: "none" });
    return;
  }
  if (!gender.value) {
    uni.showToast({ title: "请选择性别", icon: "none" });
    return;
  }
  if (!uid.value) {
    uni.showToast({ title: "身份证不能为空", icon: "none" });
    return;
  }
  if (!/^[0-9]{18}$/.test(uid.value)) {
    uni.showToast({ title: "身份证必须为18位数字", icon: "none" });
    return;
  }
  if (!name.value) {
    uni.showToast({ title: "姓名不能为空", icon: "none" });
    return;
  }
  // ... 校验代码 ...
  const params: SignupParams = {
    phone: phone.value,
    pwdmd5: md5(pwdmd5.value),
    birthday: birthday.value,
    gender: gender.value,
    uid: uid.value,
    name: name.value,
  };

  try {
    // 发送请求
    const res = await SignupApi(params);
    if (res.code === 0 || res.code === 200) {
      uni.showToast({ title: "注册成功", icon: "success" });
      uni.reLaunch({ url: "/pages/login/login" });
    } else {
      uni.showToast({ title: res.msg || "注册失败", icon: "none" });
    }
  } catch (error: any) {
    // 查看后端出现什么报错
    if (error.msg && error.msg.details && error.msg.details[0]) {
      uni.showToast({ title: error.msg.details[0].message, icon: "none" });
    } else {
      let msg = error.msg || "注册失败";
      if (typeof msg !== "string") msg = JSON.stringify(msg);
      uni.showToast({ title: msg, icon: "none" });
    }
  }
};
function onRegisterClick() {
  uni.navigateTo({ url: "/pages/login/login" });
}
</script>

<style scoped>
.header {
  width: 100%;
  height: 100px;
  display: flex;
}
.container {
  min-height: 100vh;
  background: #fbfffd;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 32px;
  margin-top: 30px;
}
.logo {
  width: 130px;
  height: 90px;
  background: #7fffd4;
  border-radius: 24px;
  margin-bottom: 8px;
  margin-right: 20px;
  margin-left: 20px;
}
.title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 90vw;
  max-width: 400px;
  margin-bottom: 12px;
}
.title-app {
  color: #666;
  font-size: 18px;
  margin-bottom: 2px;
}
.title-register {
  color: #222;
  font-size: 28px;
  font-weight: bold;
}
.form-section {
  width: 90vw;
  max-width: 400px;
  background: transparent;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 8px;
}
.label {
  font-size: 18px;
  font-weight: bold;
  color: #444;
  margin: 16px 0 6px 0;
}
.input {
  height: 44px;
  margin-bottom: 2px;
  padding: 0 12px;
  border: none;
  border-bottom: 2px solid #3ee88f;
  background: #fff;
  font-size: 16px;
  outline: none;
}
.input-password-row {
  display: flex;
  align-items: center;
}
.toggle-eye {
  font-size: 20px;
  margin-left: 8px;
  cursor: pointer;
}
.error-tip {
  color: #ff3b30;
  font-size: 14px;
  margin-bottom: 2px;
  margin-left: 8px;
}
.row-flex {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  justify-content: space-around;
}
.gender-label {
  margin-left: 40px;
}
.date-picker {
  flex: 1;
  height: 38px;
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 2px solid #3ee88f;
  padding: 0 12px;
  font-size: 16px;
  cursor: pointer;
}
.calendar-icon {
  margin-left: 8px;
  font-size: 18px;
}
.gender-group {
  display: flex;
  margin-left: 16px;
}
.gender-btn {
  width: 48px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border: 2px solid #16e06e;
  border-radius: 8px;
  color: #16e06e;
  font-weight: bold;
  margin-right: 8px;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.gender-btn.active {
  background: #16e06e;
  color: #fff;
}
.register-btn {
  height: 48px;
  background: #16e06e;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  border: none;
  border-radius: 14px;
  margin: 32px 0 18px 0;
  box-shadow: 0 4px 16px #16e06e33;
}
</style>
  